/**
 * Created by wangzilong on 2017/4/11.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    TextInput,
    ListView,
    Modal,
    Platform,
    InteractionManager,
    Alert
} from 'react-native';
import ImageWrapper from '../components/ImageWrapper';
import NavigationBar from '../components/NavigationBar';
import ButtonItem from '../components/ButtonItem';
import userService from '../lib/services/userService';
var Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');

export default class ClubDetails extends Component{
    constructor(props) {
        super(props);
        // alert(JSON.stringify(this.props.navigation.state.params.clubId))
        this.state = {
            id:this.props.navigation.state.params.clubId,
            token:this.props.navigation.state.params.token,
            isDisturb:false,
            clubData:{}
        }; 
    }

    componentDidMount() {
        var $this = this;
        InteractionManager.runAfterInteractions(() => {
            $this.getClubData();
        });
    }

    render(){
        var details = this.state.clubData;
        return (
            <View style={styles.container}>
                <NavigationBar 
                    leftIcon={'left'} 
                    titleText={'我的俱乐部'} 
                    leftPress={()=>this.goBack()}/>
                <ScrollView>
                    <View style={{backgroundColor:'#fff'}}>
                        <View style={styles.noticeBox}>
                            <ImageWrapper icon={'notice'}/>
                            <Text>暂无内容</Text>
                        </View>
                        <View>
                            <ImageWrapper icon={details.group_adv?{uri:'http://test.520m.com.cn/upload/common/'+details.group_adv}:'touxiang'} style={styles.titleImg}/>   
                        </View>
                    </View>
                    <View style={{flexDirection:'row',alignItems:'center',backgroundColor:'#fff',paddingLeft:10,paddingTop:5,paddingBottom:5,marginTop:5}}>
                        <Image source={{uri:'http://test.520m.com.cn/upload/thumb/'+ details.group_img}} style={{resizeMode: 'stretch',borderRadius:5,width:80,height:80}}>
                            <ImageWrapper style={{position:'absolute',right:0,bottom:0}} icon={'iconClub'} width={40} height={40}/>
                        </Image>
                        <Text style={{marginLeft:10,fontSize:16}}>俱乐部ID:{details.id}</Text>
                    </View>
                    <View style={{flexDirection:'row',justifyContent:'space-between',backgroundColor:'#fff',height:40,alignItems:'center',marginTop:5,paddingLeft:10,paddingRight:20}}>
                        <Text>俱乐部升级：</Text>
                        <TouchableOpacity onPress={()=>this.upClub()}>
                            <View style={{borderWidth:1,borderColor:'rgb(79,145,237)',borderRadius:3,padding:5}}>
                                <Text style={{color:'rgb(79,145,237)'}}>点击升级</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                    <DetailsItem title={'俱乐部名称：'} data={details.name || ''}/>
                    <DetailsItem title={'俱乐部介绍：'} data={details.introduce || ''}/>
                    <DetailsItem title={'俱乐部标签：'} data={details.array_label || ''}/>
                    <DetailsItem title={'俱乐部地点：'} data={details.group_location || ''}/>
                    <TouchableOpacity onPress={()=>this.goClubMember(details.id,details.role,details.name)}>
                        <View style={[styles.itemBox,{justifyContent:'space-between'}]}>
                            <Text>查看俱乐部成员({details.user_num || ''}人)</Text>
                            <ImageWrapper icon={'right'} style={{marginRight:20}}/>
                        </View>
                    </TouchableOpacity>
                    <ButtonItem 
                        textStyle={{fontSize:16,color:'#999'}} 
                        style={styles.bottomButton} 
                        title={'消息免打扰'} 
                        icon={this.state.isDisturb?'openBtn':'closeBtn'}
                        onPress={()=>this.changeBtn()}/>
                    <View style={{marginTop:30,marginBottom:30,paddingLeft:20,paddingRight:20}}>
                        <TouchableOpacity onPress={()=>this.breakClub()} style={{height:40,justifyContent:'center',alignItems:'center',borderRadius:3,backgroundColor:'rgb(90,165,237)'}}>
                            <Text style={{color:'#fff'}}>解散该俱乐部</Text>
                        </TouchableOpacity>
                    </View>
                </ScrollView>
            </View>
        )

    }

    getClubData(){
        var $this = this;
        userService.groupDetail(function(data){
            if(data.code==10000){
                $this.setState({
                    clubData:data.data
                })
            }
        },$this.state.id,$this.state.token)
    }

    upClub(){
        var $this = this;
        userService.upCrowd(function(data){
            // alert(JSON.stringify(data))
            if(data.code==10000){
                alert('升级成功！')
            }else{
                alert(data.data.data)
            }
        },$this.state.id,$this.state.token)
    }

    goBack(){
        this.props.navigation.goBack();
    }

    goAddLabel(){
        const {navigate} = this.props.navigation;
        navigate('AddLabel')
    }

    goClubMember(clubId,role,groupName){
        var $this = this;
        const {navigate} = this.props.navigation;
        navigate('ClubMember',{clubId:clubId,token:$this.state.token,role:role,groupName:groupName});
    }

    changeBtn(){
        this.setState({
            isDisturb:!this.state.isDisturb
        })
    }

    breakClub(){
        var $this = this;
        userService.groupDismiss(function(data){
            alert(JSON.stringify(data))
            if(data.code==10000){
                Alert.alert('提示信息',
                    data.data.data,
                    [{text: '确定', onPress: () => {
                        $this.props.navigation.state.params.reload();
                        $this.goBack();
                    }}])
            }
        },$this.state.id,$this.state.token)
    }
    
}

class DetailsItem extends Component{
    renderText(){
        var data = this.props.data;
        var type = typeof(data);
        if(type=='string'){
            return(
                <View>
                    <Text>{data}</Text>
                </View>
            )
        }else{
            return(
                data.map((item,i)=>{
                    return(
                        <View key={i}>
                            <View style={[styles.labelBox,{backgroundColor:'rgb(90,165,237)'}]}>
                                <Text style={{color:'#fff',fontSize:12}}>{item}</Text>
                            </View>
                        </View>
                    )
                })
            )
        }
    }
    render(){
        return(
            <View style={[styles.itemBox,{flexWrap:'wrap'}]}>
                <Text>{this.props.title}</Text>
                {this.renderText()}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#EFEFF4',
        ...Platform.select({
            ios: {
                marginTop: 20
            },
            android: {
                marginTop:0
            },

        }),
    },
    noticeBox:{
        flexDirection:'row',
        alignItems:'center',
        height:30,
        paddingLeft:5,
        paddingRight:5,
    },
    titleImg:{
        width:width-20,
        height:width-20,
        marginRight:10,
        marginLeft:10,
        marginBottom:5,
        borderRadius:3
    },
    bottomButton:{
        height:40,
        justifyContent:'center',
        paddingLeft:10,
        paddingRight:10,
        backgroundColor:'#fff',
        marginTop:5,
        marginBottom:30
    },
    itemBox:{
        flexDirection:'row',
        paddingLeft:10,
        paddingBottom:10,
        paddingTop:10,
        marginTop:5,
        backgroundColor:'#fff'
    },
    labelBox:{
        padding:2,
        borderWidth:1,
        borderColor:'rgb(79,145,237)',
        borderRadius:2,
        marginRight:20,
        marginBottom:10
    },
    
});